@import url("common/module.less");
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1431416600_6071196.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/font_1431416600_6071196.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_1431416600_6071196.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/font_1431416600_6071196.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_1431416600_6071196.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.sprite{
    background: url(../img/sprite.png) no-repeat;
}
.tit1{
    background-position: 0 -75px;
}


.tit2{
    background-position: 0 -123px;
}

.tit3{
    background-position: 0 -178px;
}

.tit4{
    background-position: 0 -230px;
}

.tit5{
    background-position: 0 -282px;
}

.header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width:100%;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.5);
    // background-color: #fff;
}

.logo{
    padding-left: 20px;
    padding-top: 3px;
    line-height: 50px;
    h1{
        display:inline-block;
        width:137px;
        height:37px;
        font-size: 0;
    }
    span{
        font-size: 20px;
        font-family: @font-YaHei;
        color:#fff;
        vertical-align: middle;
    }

}
.head-link {
    float: right;
    margin-top: 7px;
    margin-right: 20px;

    a {
        display: inline-block;
        margin-right: 20px;
        border: 1px solid transparent;
        border-radius: 3px;
        padding: 5px 15px;
        font-size: 16px;
        color: #5c5c5c;

        &:hover {
            border-color: #d60505;
            color:#d60505;
        }
    }
    .link-cur{
        border-color: #d60505;
        color:#d60505;
    }
}

/*侧边小导航*/
#fp-nav{
    ul li{
        margin-bottom: 11px;
        width:10px;
        height:10px;
    }
    a{
        border: 2px solid #fff; 
        border-radius: 50%;
        &:hover{
            background-color: #fff;
        }
    }
    span{
            display:none;
        }
    .active{
        background-color: #fff;
    }
    &.right{
        right:40px;
    }
}

.m-download{
    position:fixed;
    top:50%;
    left:50%;
    margin-left: 250px;
    margin-top: -125px;
    width:248px;
    height:330px;
    background-color:#fafafa;
    border-radius: 10px;
    .qrcode{
        float:left;
        width:100%;
        height:207px;
        background-color:#fff;
        text-align: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        &-tit{
            margin: 10px 0;
            font-size: 14px;
            font-family: @font-YaHei;
            color:#333;
        }
        &-pic{
            margin:0 auto;
            padding-top:10px;
            width:149px;
            height:139px;
            border:1px solid #fafafa;
            span{
                display:inline-block;
                width:130px;
                height:130px;
                background-position: 0 -340px;
            }
        }
    }
    .dow-btn{
        display:inline-block;
        margin:10px 0 0 43px;
        width:164px;
        height:42px;
        line-height: 42px;
        border-radius: 5px;
        color:#fff;
        font-size: 16px;
        background-color: #b80100;
        text-align: center;
        span{
            display:inline-block;
            margin-right: 3px;
            font-size: 21px;
            font-family: iconfont;
        }
        &:hover{
            background-color: #ce0303;
        }
    }
    .iphone{
        background-color: #df2929; 
        box-shadow: 0px 2px 0px 1px #b80100;
        &:hover{
            background-color: #f02e2e;
            box-shadow: 0px 2px 0px 1px #c70201;
        }
    }
}

.first-pic-one{
    position:absolute;
    left:50%;
    top:50%;
    margin-left: -300px;
    margin-top: -170px;
    opacity: 0;
    transform:translate(0px,170px);
    animation:firstOne 2s ease .2s 1 forwards;
}

@keyframes firstOne{
  100%{
    opacity:1;
    transform:translate(0px,0px);
  }
}



.first-pic-two{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-220px; 
    margin-left:-590px; 
    opacity:0;
    animation:firstTwo 10s linear 2s infinite forwards; //简写
    // animation-name:firstTwo; //动画名称
    // animation-direction: 10s;//动画运行时间
    // animation-timing-function: linear;//动画的播放方式，匀速播放
    // animation-delay: 2s;//2秒后开始执行动画
    // animation-iteration-count: infinite;//无限执行动画
    // animation-fill-mode: forwards;//动画完成后的状态，保持在最后一贞
}

@keyframes firstTwo{
    0%{
        transform: rotate(0deg); //角度旋转
        opacity:1;
    }
    100%{
      transform: rotate(360deg);
      opacity:1;
    }
}

.m-tit{
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -215px;
    margin-left: 250px;
    color:#fff;
    opacity:0;
    transform:rotate(45deg) translate(100px,0px);
    transform-origin: right bottom;
    h2{
        font-size: 0px;
        width:350px;
        height:40px;
    }
    span{
        display:inline-block;
        padding-left: 5px;
        font-size: 18px;
        font-family: @font-YaHei;
    }
    .fs-16{
        font-size: 16px;
    }
    .w320{
        width:321px;
    }
}
.m-tit-top{
    margin-top: -237px;
}
.m-tit-cur{
    animation:tit 2s ease .2s 1 forwards;
}

@keyframes tit{
    100%{
      transform: rotate(0deg) translate(0px,0px);
      opacity:1;
    }
}

.second{
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -225px;
    margin-left: -295px;
    width: 390px;
    height: 450px;
    background: url(../img/second.png) no-repeat;
    .succes{
        margin-left: 210px;
        opacity:0;
    }
    .succes-cur{
        animation:second 2s ease .2s 1 forwards; //简写
    }
}

@keyframes second{
    100%{
        opacity:1;
    }
}

.thirdly{
    position:absolute;
    top: 50%;
    left:50%;
    margin-top: -210px;
    margin-left: -460px;
    width:499px;
    height:420px;
    background: url(../img/thirdly1.png) no-repeat;
    opacity:0;
    &-cur{
        animation:thirdlyImg 2s linear 2s 1 forwards;
    }
}

.s-cloud{
    position:absolute;
    top: 50%;
    left:50%;
    margin-top: -100px;
    margin-left: -500px;
    width:498px;
    height:166px;
    background:url(../img/thirdly2.png) no-repeat;
    opacity:0;
    &-cur{
        animation:cloud 10s linear 2s infinite none;
    }
}


.t-p{
    position:absolute;
    top: 50%;
    left:50%;
    margin-top: -50px;
    margin-left: -457px;
    width:495px;
    height:257px;
    background:url(../img/sprite_thirdly.png) no-repeat;
    transform:translate(0px,260px);
    opacity:0;
    &-cur{
        animation:thirdlyTp 2s ease .2s 1 forwards;
    }
}


@keyframes thirdlyImg{
    100%{
        opacity:1;
    }
}

@keyframes thirdlyTp{
    100%{
        transform:translate(0px,0px);
        opacity:1;
    }
}

@keyframes cloud{
    50%{
        opacity:.5;
    }
    100%{
        transform:translate(100px,0px);
        opacity:0;
    }
}

.phone{
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -200px;
    margin-left: -400px;
    width: 450px;
    height: 450px;
    background:url(../img/four2.png) no-repeat;
    opacity:0;
    &-cur{
        animation:phone 2s ease .2s 1 forwards;
    }
}

@keyframes phone{
    100%{
        opacity:1;
    }
}

.hand{
    position: absolute;
    top:50%;
    left:50%;
    margin-top: -20px;
    margin-left: -414px;
    width: 225px;
    height: 172px;
    background:url(../img/four5.png) no-repeat;
    transform:translate(-60px,80px);
    opacity:0;
    &-cur{
        animation:hand 2s ease 2s 1 forwards;
    }
}
@keyframes hand{
    100%{
        opacity:1;
        transform:translate(0px,0px);
    }
}


.slass{
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -220px;
    margin-top: -225px;
    width: 296px;
    height: 329px;
    background:url(../img/four3.png) no-repeat;
    opacity:0;
    transform:translate(80px,-100px);
    &-cur{
        animation:slass .7s ease 3s 1 forwards;
    }
}

@keyframes slass{
    100%{
        opacity:1;
        transform:translate(0px,0px);
    }
}

.type{
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -170px;
    margin-top: -139px;
    width: 100px;
    height: 137px;
    background:url(../img/four4.png) no-repeat;
    transform:scale(0);
    &-cur{
        animation:type .9s ease 3.4s 1 forwards;
    }
}

@keyframes type{
    100%{
        transform:scale(1);
    }
}

.star-box{
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -330px;
    margin-top: -200px;
    width: 299px;
    height: 334px;
    div{
        background:url(../img/four1.png) no-repeat;
    }
    .star1{
        width: 45px;
        height: 47px;
        transform:scale(0);
    }
    .star2{
        margin-top: 100px;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        transform:scale(0);
        background-position: -62px -14px;
    }
    .star3{
        margin-top: 100px;
        margin-left: 280px;
        width: 30px;
        height: 30px;
        transform:scale(0);
        background-position: -102px -14px;
    }
    &-cur{
        .star1{
            animation:star 1.5s ease 4s infinite forwards;
        }
        .star2{
            animation:star 1.5s ease 4.2s infinite none;
        }
        .star3{
            animation:star 1.5s ease 4.4s infinite none;
        }
    }
}

@keyframes star{
    0% {
        transform: scale(1.1,1.1)
    }

    50% {
        transform: scale(0.8,.8)
    }

    90% {
        transform: scale(1.3,1.3)
    }

    100% {
        transform: scale(1.1,1.1)
    }
}

.goods{
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -350px;
    margin-top: -190px;
    width:405px;
    height:415px;
    background:url(../img/five1.png) no-repeat;
    opacity:0;
    transform:translate(0,200px);
    &-cur{
        animation:goods 2s ease .2s 1 forwards;
    }
}

@keyframes goods{
    100%{
        opacity:1;
        transform:translate(0,0);
    }
}

.goods-type{
    position:absolute;
    top: 50%;
    left:50%;  
    margin-left: -387px;
    margin-top: -227px;
    width:515px;
    height:325px;    
    background:url(../img/five2.png) no-repeat;
    opacity:0;
    transform:scale(.5) rotate(50deg);
    &-cur{
        animation:goodst 2s ease 2s 1 forwards;
    }
}

@keyframes goodst{
    100%{
        opacity:1;
        transform:scale(1) rotate(0deg);
    }
}

.price{
    position:absolute;
    top: 50%;
    left:50%;
    margin-left: -165px;
    width:182px;
    height:209px;
    background:url(../img/five3.png) no-repeat;
    opacity:0;
    transform:scale(0);
    transform-origin: left top;
    &-cur{
        animation:price 2s ease 3.5s 1 forwards;
    }
}

@keyframes price{
    100%{
        opacity:1;
        transform:scale(1);
    }
}